<script setup lang="ts">
export interface ProcessNode { icon: string, activeIcon: string, label: string }

const props = defineProps<{
  activeNodes?: ProjectNode[]
  nodes?: ProjectNode[]
  allLightMode?: boolean // 在项目详情页里4月7日新增“已完成节点卡片”，仅展示点亮的节点，故新增此 prop
}>()

defineEmits(['select'])

/**
 * @description 使用后端返回的 activeNodes 中的最后一项作为最新的节点，
 * 将所有节点的 0 到 最新节点的部分切出来作为高亮节点
 *
 * 原因是 2024.04.26 又让改回最开始的节点点亮逻辑，但是之前接口已经从返回一个最新节点变成了返回所有点亮的节点，
 * 后端又不想帮忙改，所以只能自己操作
 */
const lightNodes = computed(() => {
  if (!props.activeNodes?.length || !props.nodes?.length)
    return []
  const latestNode = props.activeNodes[0]
  const rangeEndIndex = props.nodes.findIndex(el => el.name === latestNode.node_name)
  return props.nodes.slice(0, rangeEndIndex + 1) || []
})

/**
 * @param target 检测给定节点是否被包含在已点亮节点中
 */
function isInclude(target: ProjectNode) {
  const isInclude = lightNodes.value.filter(el => el.name === target.name).length > 0
  // 收一期款属于业务员发起项目时就默认点亮的节点，所以这里这样写
  const isFirst = target.name === '收一期款'
  return isInclude || isFirst
}
</script>

<template>
  <view class="main flex items-center w-630rpx overflow-x-scroll overflow-y-hidden">
    <view v-for="node, index in props.nodes" :key="node.id" class="flex flex-shrink-0 flex-col items-center w-46rpx" :class="[index !== props.nodes?.length! - 1 ? 'mr-72rpx' : '']" @tap="$emit('select', node.id)">
      <image
        class="w-46rpx h-46rpx mb-12rpx" :style="{
          filter: isInclude(node) || allLightMode ? 'invert(54%) sepia(24%) saturate(6182%) hue-rotate(352deg) brightness(95%) contrast(102%)' : 'inherit',
        }" :src="node.image"
      />
      <view
        class="whitespace-pre-line text-center text-22rpx leading-24rpx text-tertiary"
        :style="{ color: isInclude(node) || allLightMode ? '#FF6D0A' : '' }"
      >
        {{ node.name }}
      </view>
    </view>
  </view>
</template>

<style scoped>
.main::-webkit-scrollbar {
  display: none;
}
</style>
